<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="支出/收入">
          <el-select v-model="formInline.direction" placeholder="支出/收入" @change="inOutChange">
            <el-option v-for="item in directionOption" :key="item.value"  :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker v-model="value" @change="timeChage" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" style="text-align: left">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column label="时间">
          <template slot-scope="scope">{{ scope.row.time |dateFormat}}</template>
        </el-table-column>
        <el-table-column prop="changed" label="积分"></el-table-column>
        
        <el-table-column prop="balance" label="余额"></el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">{{ scope.row.comment }}</template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>
<script>
  import {
    getScore
  } from "@/api/service";
  export default {
    data() {
      return {
        directionOption: [{
          label: '支出',
          value: -1,
        },{
          label: '收入',
          value: 1
        }],
        value: [],
        formInline: {
          direction: "",
          beginTime: '',
          endTime: ''
        },
        tableData: [],
        multipleSelection: [],
      };
    },
    filters: {
      dateFormat: (args) => {
        let fmt = "YYYY-mm-dd HH:MM:SS"
        let ret;
        if (args) {
          let date = new Date(args)
          const opt = {
            "Y+": date.getFullYear().toString(), // 年
            "m+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "M+": date.getMinutes().toString(), // 分
            "S+": date.getSeconds().toString() // 秒
          };
          for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
              fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
          };
          return fmt;
        } else {
          return "";
        }
      },

    },
    mounted() {
      this.search();
    },
    methods: {
      search() {
        getScore(this.formInline).then((res) => {
          if(res.status==200){
              this.tableData = res.data.content;
          }
        });
      },
      timeChage(val) {
        this.formInline.beginTime = this.dateFormat(val[0]);
        this.formInline.endTime =this.dateFormat(val[1]);
        this.search();
        // console.log(this.formInline);
      },
      inOutChange(val) {
        this.search();
      },
      dateFormat: (args) => {
        let fmt = "YYYY-mm-dd HH:MM:SS"
        let ret;
        if (args) {
          let date = new Date(args)
          const opt = {
            "Y+": date.getFullYear().toString(), // 年
            "m+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "M+": date.getMinutes().toString(), // 分
            "S+": date.getSeconds().toString() // 秒
          };
          for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
              fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
          };
          return fmt;
        } else {
          return "";
        }
      },
    }
  };
</script>
<style lang="less" scoped>
  .demo-form-inline {
    text-align: left;
  }

  .pagination {
    margin: 15px auto;
  }
</style>
